<template>
  <div>
    <Update ref="update" :flowInfo="flowInfo" @refresh="refresh"></Update>
    <ZgDrawer
      :title="`${flow===null?'请选择流程':(flow.name+'【'+flow.code+'】')}`"
      width="95%"
      v-model="visible">
      <div slot="extra">
        <FlowSelect @change="onSelectFlow"></FlowSelect>
      </div>
      <ZgEmpty v-if="flow===null"></ZgEmpty>
      <a-row v-else :gutter="10">
        <a-col :span="4">
          <a-card size="small" title="全链路环节">
            <div class="scroll pd15" :style="{margin:'-10px',height:`${winHeight-200}px`}">
              <a-collapse v-model="activeKey">
                <template v-if="flowInfo.preAutoFlows && flowInfo.preAutoFlows.length > 0">
                  <a-collapse-panel v-for="item in flowInfo.preAutoFlows" :key="item.code" :header="item.name" >
                    <div :class="v.id===currStepIndex?'curr':''" class="flx-s item" v-for="(v,i) in item.stepList" :key="`step1${i}`" @click="stepInfo(v)">
                      <div class="mr5">{{ v.stepName }}</div>
                      <div>【{{ v.stepNo }}】</div>
                    </div>
                  </a-collapse-panel>
                </template>
                <a-collapse-panel key="2" :header="flowInfo.name">
                  <div :class="v.id===currStepIndex?'curr':''" class="flx-s item" v-for="(v,i) in flowInfo.stepList" :key="`step2${i}`" @click="stepInfo(v)">
                    <div class="mr5">{{ v.stepName }}</div>
                    <div>【{{ v.stepNo }}】</div>
                  </div>
                </a-collapse-panel>
                <!-- <a-collapse-panel key="3" header="本流程名称" v-if="flowInfo.nextAutoFlow && flowInfo.nextAutoFlow.length > 0">
                  <div :class="`3${i}`===currStepIndex?'curr':''" class="flx-s item" v-for="(v,i) in flowInfo.nextAutoFlow" :key="`step3${i}`" @click="stepInfo(3,i,v)">
                    <div class="mr5">{{ v.stepName }}</div>

                    <div>【{{ v.stepNo }}】</div>
                  </div>
                </a-collapse-panel> -->
              </a-collapse>
            </div>
          </a-card>
        </a-col>
        <a-col :span="20">
          <a-tabs v-model="tab" type="card" @tabClick="tabClick">
            <a-tab-pane v-for="v in stepInfolist" :key="v.formId" :tab="v.formName"></a-tab-pane>
            <!-- <a-tab-pane :key="2" tab="表单名称2"></a-tab-pane>
            <a-tab-pane :key="3" tab="表单名称3"></a-tab-pane> -->
          </a-tabs>
          <div class="mb10">
            <a-form :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
              <a-row>
                <a-col :span="6">
                  <a-form-item label="查询条件" style="margin-bottom:0;">
                    <ZgInput></ZgInput>
                  </a-form-item>
                </a-col>
                <a-col :span="6">
                  <a-form-item label="查询条件" style="margin-bottom:0;">
                    <ZgInput></ZgInput>
                  </a-form-item>
                </a-col>
                <a-col :span="6">
                  <a-form-item label="查询条件" style="margin-bottom:0;">
                    <ZgInput></ZgInput>
                  </a-form-item>
                </a-col>
                <a-col :span="6">
                  <div class="flx-s pt4 ml15">
                    <ZgButton type="default" class="mr10" icon="refresh">重置</ZgButton>
                    <ZgButton icon="search">查询</ZgButton>
                  </div>
                </a-col>
              </a-row>
            </a-form>
          </div>
          <a-table
            size="small"
            bordered
            :customHeaderRow="()=>{return { style: { background: '#f2f2f2' } }}"
            :pagination="false"
            :data-source="formInfo"
            :scroll="{ x: 1600, y: winHeight - 300 }">
            <a-table-column :width="45" title="序号">
              <template slot-scope="text,record,index">
                <div class="wfull tac">{{ index+1 }}</div>
              </template>
            </a-table-column>
            <a-table-column title="名称">
              <template slot-scope="scope">
                {{ scope.sourceField }}
              </template>
            </a-table-column>
            <a-table-column :width="120" title="编码">
              <template slot-scope="scope">
                {{ scope.sourceColumn }}
              </template>
            </a-table-column>
            <!-- <a-table-column :width="100" title="类型">
              <template slot-scope="scope">
                {{ scope.type }}
              </template>
            </a-table-column> -->
            <a-table-column :width="80" title="继承">
              <template slot-scope="scope">
                <a-tag v-if="scope.targetColumn" color="blue">是</a-tag>
                <div v-else>-</div>
              </template>
            </a-table-column>
            <a-table-column-group title="继承字段来源" align="center">
              <a-table-column title="流程">
                <template slot-scope="scope">
                  {{ scope.targetFlowName }}
                </template>
              </a-table-column>
              <a-table-column title="环节">
                <template slot-scope="scope">
                  {{ scope.targetStepName }}
                </template>
              </a-table-column>
              <a-table-column title="表单">
                <template slot-scope="scope">
                  {{ scope.targetFormName }}
                </template>
              </a-table-column>
              <a-table-column title="字段">
                <template slot-scope="scope">
                  {{ scope.targetField }}
                </template>
              </a-table-column>
            </a-table-column-group>
            <a-table-column fixed="right" title="操作">
              <template slot-scope="scope">
                <div class="flx-s">
                  <ZgButton class="mr10" icon="edit" @click="update(scope)">修改</ZgButton>
                  <ZgButton type="default" icon="minus-circle" @click="cancel(scope)">取消继承</ZgButton>
                </div>
              </template>
            </a-table-column>
          </a-table>
        </a-col>
      </a-row>
    </ZgDrawer>
  </div>
</template>
<script>
import Update from './Update'
import FlowSelect from './FlowSelect'
export default {
  components: {
    Update, FlowSelect
  },
  data () {
    return {
      flow: null,
      visible: false,
      activeKey: ['2'],
      currFlowIndex: 0,
      currStepIndex: '',
      tab: '',
      flowInfo: {},
      formInfo: [],
      stepInfolist: [],
      list: [],
      addinfo: {}
    }
  },
  methods: {
    onSelectFlow (param) {
      this.flow = param
      this.$http.post('/zg-autoflow/autoFlow/main/getAutoFlowMainLink', { flowId: this.flow.id }, (res) => {
        this.flowInfo = res
        this.formInfo = []
        this.stepInfolist = []
        this.list = []
        this.currStepIndex = ''
        // this.stepInfo('1', 1, res)
      })
    },
    stepInfo (val) {
      console.log(val)
      this.currStepIndex = val.id
      this.addinfo.StepId = val.id
      this.$http.post('/zg-autoflow/autoFlow/step/formList', { stepId: val.id }, (res) => {
        this.stepInfolist = res
        if (this.stepInfolist.length > 0) {
          this.tab = this.stepInfolist[0].formId
          this.tabClick(this.tab)
        } else {
          this.formInfo = []
        }
        // this.flowInfo = res
      })
    },
    tabClick (val) {
      console.log(val)
      this.addinfo.FormId = val
      this.$http.post('/zg-autoflow/autoFlow/extends/getColumnsExtends', { formId: val }, (res) => {
        this.formInfo = res
      })
    },
    open () {
      this.visible = true
    },
    onSearch () {
    },
    refresh () {
      this.tabClick(this.addinfo.FormId)
    },
    update (val) {
      const obj = {
        ...val,
        ...this.addinfo
      }
      this.$refs.update.open(obj)
    },
    cancel (val) {
      console.log(val)

      this.$http.post('/zg-autoflow/autoflow/extends/del', [val.extendsId], res => {
        this.tabClick(this.addinfo.FormId)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.item{
  background: #f2f2f2;
  margin-bottom:10px;
  padding:10px;
  border-radius:3px;
  cursor:pointer;
  &:hover,&.curr{
    background: #2979ff;
    color:#fff;
  }
}
</style>
